<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/haiershouye1.css">
    <script src="jq/jquery-3.3.1.js"></script>
</head>
<body>
<div class="warper">
    <div class="header-inner">
        <div class="header clearfix">
            <div class="headerzuo clearfix">
                <a href="index.html"><img src="images/haier-logo_03.gif" alt="" class="logo"></a>
                <ul class="clearfix">
                    <li class="btn1"><a href="">智慧生活</a></li>
                    <li class="btn2"><a href="">个人与家用产品</a></li>
                    <li class="btn3"><a href="">商业解决方案</a></li>
                    <li class="btn4"><a href="">用户服务</a></li>
                    <li class="btn5"><a href="">购买</a></li>
                </ul>
                <input type="text">
                <img src="images/sousuo_03.gif" alt="" class="sousuo">
                <div class="headeryou clearfix">
                    <div class="headerwenzi">
                        <a href="">登录</a>
                        <span>|</span>
                        <a href="">注册</a>
                    </div>
                    <a href=""><img src="images/sandaogang_03.gif" alt="" class="san"></a>
                </div>
            </div>
        </div>
        <div class="aaa">
            <div class="pic">
                <a href=""><img src="images/linggggg.jpg" alt=""></a>
                <a href=""><img src="images/yiiii.jpg" alt=""></a>
                <a href=""><img src="images/ereeeeee.jpg" alt=""></a>
                <a href=""><img src="images/sannnnn.jpg" alt=""></a>
            </div>
            <div class="circle clearfix">
                <div class="circlea add"></div>
                <div class="circlea"></div>
                <div class="circlea"></div>
                <div class="circlea"></div>
            </div>
        </div>
    </div>
    <div class="nav clearfix">
        <div class="nav-shang">
            <div class="yi">
                <img src="images/bingxiang_05.gif" alt="">
                <p class="bxiang"><a href="bingxiangzhuanqu2.html">冰箱专区</a></p>
            </div>
            <div class="er">
                <img src="images/kongtiao_08.gif" alt="">
                <p><a href="kongtiaozhuanqu3.html">空调专区</a></p>
            </div>
            <div class="san">
                <img src="images/xiyiji_05.gif" alt="">
                <p><a href="xiyijizhuanqu4.html">洗衣机专区</a></p>
            </div>
            <div class="si">
                <img src="images/chudian_08.gif" alt="">
                <p><a href="">厨电专区</a></p>
            </div>
            <div class="wu">
                <img src="images/shangcheng_03.gif" alt="">
                <p><a href="">商城专区</a></p>
            </div>
            <div class="liu">
                <img src="images/dingzhi_03.gif" alt="">
                <p><a href="">定制专区</a></p>
            </div>
            <div class="qi">
                <img src="images/gengduojingcai_06.gif" alt="">
                <p><a href="">更多精彩</a></p>
            </div>
        </div>
        <div class="nav-xia">
            <img class="tu1" src="images/yi_03.gif" alt="">
            <img class="tu2" src="images/er_03.gif" alt="">
            <img class="tu3" src="images/san_03.gif" alt="">
        </div>
    </div>
    <div class="main-inner">
        <div class="main">
            <div class="main-yi clearfix">
                <img class="xian1" src="images/xian_03.gif" alt="">
                <h1>家电排行</h1>
                <img class="xian2" src="images/xian_03.gif" alt="">
            </div>
            <div class="main-er clearfix">
                <p class="btn1">洗衣机</p>
                <p class="btn2">冰箱</p>
                <p class="btn3">空调</p>
                <p class="btn4">热水器</p>
                <p class="btn5">电视</p>
                <p class="btn6">吸油烟机</p>
                <p class="btn7">燃气灶</p>
            </div>
            <div class="main-san">
                <div class="san-zuo">
                    <div class="sanz-shang">
                        <h2>人气榜</h2>
                    </div>
                    <div class="sanz-xia">
                        <img src="images/bxyi_03.gif" alt="">
                        <ul class="yi">
                            <h3>1</h3>
                            <p class="one">EG10014B39GU1</p>
                            <p class="two">10.0公斤变频滚筒洗衣机</p>
                        </ul>
                        <ul class="er">
                            <h3>2</h3>
                            <p>XQB80-BM21JD</p>
                        </ul>
                        <ul class="san">
                            <h3>3</h3>
                            <p>EB70M919</p>
                        </ul>
                        <ul class="si">
                            <h3>4</h3>
                            <p>XQG100-14HB30GU1JD</p>
                        </ul>
                        <ul class="wu">
                            <h3>5</h3>
                            <p>XQB80-M21JD</p>
                        </ul>
                    </div>
                </div>
                <div class="san-zhong">
                    <div class="sanz-shang">
                        <h2>综合榜</h2>
                    </div>
                    <div class="sanz-xia">
                        <img src="images/bxer_03.gif" alt="">
                        <ul class="yi">
                            <h3>1</h3>
                            <p class="one">EB80M39TH</p>
                            <p class="two">8.0公斤全自动波轮洗衣机</p>
                        </ul>
                        <ul class="er">
                            <h3>2</h3>
                            <p>EB80BM39TH</p>
                        </ul>
                        <ul class="san">
                            <h3>3</h3>
                            <p>EG10012BKX839SU1</p>
                        </ul>
                        <ul class="si">
                            <h3>4</h3>
                            <p>EB85BM59GTHU1</p>
                        </ul>
                        <ul class="wu">
                            <h3>5</h3>
                            <p>XQB80-M21JD</p>
                        </ul>
                    </div>
                </div>
                <div class="san-you">
                    <div class="sanz-shang">
                        <h2>销量榜</h2>
                    </div>
                    <div class="sanz-xia">
                        <img src="images/bxsan_03.gif" alt="">
                        <ul class="yi">
                            <h3>1</h3>
                            <p class="one">EB80M39TH</p>
                            <p class="two">8.0公斤全自动波轮洗衣机</p>
                        </ul>
                        <ul class="er">
                            <h3>2</h3>
                            <p>XQB70-KM12688</p>
                        </ul>
                        <ul class="san">
                            <h3>3</h3>
                            <p>EG10014B39GU1</p>
                        </ul>
                        <ul class="si">
                            <h3>4</h3>
                            <p>XQB80-Z1708</p>
                        </ul>
                        <ul class="wu">
                            <h3>5</h3>
                            <p>XQB80-BM21JD</p>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-si">
                <div class="si-shang">
                    <img class="xian3" src="images/xian_03.gif" alt="">
                    <h1>心选新品</h1>
                    <img class="xian4" src="images/xian_03.gif" alt="">
                </div>
                <div class="si-xia clearfix">
                    <div class="si-xiazuo clearfix">
                        <div class="yi1">
                            <img src="images/shangsanjiao_03.gif" alt="">
                        </div>
                        <div class="er2">
                            <img src="images/reshuiqi_03.gif" alt="">
                            <p>热水器</p>
                        </div>
                        <div class="san3">
                            <img src="images/kongtiaoo_03.gif" alt="">
                            <p>空调</p>
                        </div>
                        <div class="si4">
                            <img src="images/xiyiji_07.gif" alt="">
                            <p>洗衣机</p>
                        </div>
                        <div class="wu5">
                            <img src="images/chudian_03.gif" alt="">
                            <p>厨电</p>
                        </div>
                        <div class="liu6">
                            <img src="images/bingxiangg_07.gif" alt="">
                            <p>冰箱</p>
                        </div>
                        <div class="qi7">
                            <img src="images/xiasanjiao_06.gif" alt="">
                        </div>
                    </div>
                    <div class="si-xiayou clearfix">
                        <img  src="images/jianyue_03.gif" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="had">
        <div class="had-yi">
            <div class="hadyi-shang">
                <img class="xian5" src="images/xian_03.gif" alt="">
                <h1>发现新鲜</h1>
                <img class="xian6" src="images/xian_03.gif" alt="">
            </div>
            <div class="hadyi-xia">
                <img class="tu4" src="images/xi_03.gif" alt="">
                <img class="tu5" src="images/zao_03.gif" alt="">
                <img class="tu6" src="images/shui_03.gif" alt="">
            </div>
        </div>
    </div>
    <div class="banner-inner">
        <div class="banner">
            <div class="banner-yi">
                <div class="banneryi-shang">
                    <img class="xian7" src="images/xian_03.gif" alt="">
                    <h1>嗨购分场</h1>
                    <img class="xian8" src="images/xian_03.gif" alt="">
                </div>
                <div class="banneryi-xia">
                    <div class="one">
                        <img src="images/tianmao_03.gif" alt="">
                        <a href="">礼遇圣诞</a>
                    </div>
                    <div class="two">
                        <img src="images/suning_03.gif" alt="">
                        <a href="">海尔官方旗舰店</a>
                    </div>
                    <div class="three">
                        <img src="images/jingd_03.gif" alt="">
                        <a href="">超级品牌日</a>
                    </div>
                    <div class="fuor">
                        <img src="images/gome_03.gif" alt="">
                        <a href="">时间在变 新鲜不变</a>
                    </div>
                    <div class="five">
                        <img src="images/haier666_03.gif" alt="">
                        <a href="">净享好水 乐享健康</a>
                    </div>
                </div>
            </div>
            <div class="banner-er">
                <div class="p">
                    <p>海尔开放新模式</p>
                </div>
                <div class="a">
                    <a href="">顺逛 |</a>
                    <a href="">智慧生活平台 |</a>
                    <a href="">生态用户平台 |</a>
                    <a href="">生态资源平台 |</a>
                    <a href="">海尔互联工厂 |</a>
                    <a href="">海尔创意平台 |</a>
                    <a href="">创客实验室 |</a>
                    <a href="">COSMOPlat平台 |</a>
                    <a href="">智慧生活体验馆 |</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-inner">
        <div class="footer">
            <div class="footer-shang clearfix">
                <div class="diyi clearfix">
                    <h3 class="hyi">冰箱  冷柜</h3>
                    <a href="">单门冰箱</a>
                    <a href="">两门冰箱</a>
                    <a href="">三门冰箱</a>
                    <a href="">对开门冰箱</a>
                    <a href="">多门冰箱</a>
                    <a href="">十字对开门冰箱</a>
                    <a href="">立式冷柜</a>
                    <a href="">卧式冷柜</a>
                    <a href="">展示柜</a>
                    <h3 class="her">冰吧酒柜专区</h3>
                    <a href="">冰吧</a>
                    <a href="">酒柜</a>
                    <h3 class="hsan">洗衣机专区</h3>
                    <a href="">滚筒洗衣机</a>
                    <a href="">波轮洗衣机</a>
                    <a href="">干衣机</a>
                </div>
                <div class="dier clearfix">
                    <h3 class="hsi">空调</h3>
                    <a href="">壁挂式空调</a>
                    <a href="">柜式空调</a>
                    <a href="">家用中央空调</a>
                    <a href="">除湿机</a>
                    <a href="">移动空调</a>
                    <h3 class="hwu">热水器</h3>
                    <a href="">电热水器</a>
                    <a href="">燃气热水器</a>
                    <a href="">太阳能热水器</a>
                    <a href="">采暖炉</a>
                    <a href="">空气能热水器</a>
                    <h3 class="hliu">电视</h3>
                    <a href="">曲面电视</a>
                    <a href="">4K高清电视</a>
                    <a href="">智能电视</a>
                    <a href="">蓝光电视</a>
                </div>
                <div class="disan clearfix">
                    <h3 class="hqi">厨房电器</h3>
                    <a href="">吸油烟机</a>
                    <a href="">燃气灶</a>
                    <a href="">电烤箱</a>
                    <a href="">洗碗机</a>
                    <a href="">消毒柜</a>
                    <a href="">空气炸锅</a>
                    <h3 class="hba">电脑 手机</h3>
                    <a href="">笔记本电脑</a>
                    <a href="">台式电脑</a>
                    <a href="">平板电脑</a>
                    <a href="">一体电脑</a>
                    <a href="">网络设备及外设</a>
                    <a href="">手机专区</a>
                </div>
                <div class="disi clearfix">
                    <h3 class="hjiu">小家电</h3>
                    <a href="">厨房小家电</a>
                    <a href="">生活小家电</a>
                    <a href="">个护小家电</a>
                    <a href="">母婴小家电</a>
                    <h3 class="hshi">智慧家电</h3>
                    <a href="">空气净化器</a>
                    <a href="">空气魔方</a>
                    <a href="">车载净化器</a>
                    <a href="">新风机</a>
                    <a href="">扫地机器人</a>
                    <a href="">智能体脂秤</a>
                    <a href="">智能洁身器</a>
                    <a href="">魔镜</a>
                    <a href="">智能音箱</a>
                    <a href="">冰箱</a>
                    <a href="">空调</a>
                    <a href="">电烤箱</a>
                    <a href="">洗衣机</a>
                    <a href="">热水器</a>
                </div>
                <div class="diwu clearfix">
                    <h3 class="hshiyi">定制产品</h3>
                    <a href="">定制家具</a>
                    <a href="">集成家居</a>
                </div>
                <div class="diliu clearfix">
                    <h3 class="hshier">商业解决方案</h3>
                    <a href="">中央空调</a>
                    <a href="">商用冷柜</a>
                    <a href="">商用洗條</a>
                    <a href="">商用电视</a>
                    <a href="">商用电脑</a>
                    <a href="">生物医疗</a>
                    <a href="">U-home</a>
                    <a href="">商用净水设备</a>
                    <a href="">商用热泵</a>
                    <a href="">海尔地产</a>
                </div>
                <div class="diqi clearfix">
                    <h3 class="hshisan">服务</h3>
                    <a href="">认证产品</a>
                    <a href="">预约安装</a>
                    <a href="">在线报修</a>
                    <a href="">特色服务</a>
                    <a href="">服务政策</a>
                    <a href="">服务状态查询</a>
                    <a href="">海尔服务店</a>
                    <a href="">海尔门店</a>
                    <a href="">智慧家庭体验店</a>
                    <a href="">应用中心</a>
                    <a href="">帮助中心</a>
                </div>
                <div class="diba clearfix">
                    <img src="images/hai_03.gif" alt="">
                    <p class="p1">全球</p>
                    <p class="p2">国家</p>
                    <span>中国</span>
                </div>
                <div class="dijiu clearfix">
                    <img src="images/erweima_03.gif" alt="">
                    <p>扫码关注海尔家电</p>
                </div>
            </div>
            <div class="footer-xia clearfix">
                <div class="footer-a clearfix">
                    <a href="">关于海尔 |</a>
                    <a href="">联系我们 |</a>
                    <a href="">法律声明 |</a>
                    <a href="">帮助中心 |</a>
                    <a href="">海尔门店 </a>
                </div>
                <div class="footer-p clearfix">
                    <p>鲁ICP备09096283 |</p>
                    <p class="per">Copyright ©2015 海尔集团 版权所有</p>
                </div>
            </div>
        </div>
    </div>
    <div class="btn-top">回到顶部</div>
</div>
<div class="right_nav">
      <div class="nav_dv1" id="nav_dv">
         <div id="nav_t">One</div>
         <div class="nav_x2">冰箱专区</div>
      </div>
      <div class="nav_dv2" id="nav_dv">
         <div id="nav_t">Two</div>
         <div class="nav_x2">空调专区</div>
      </div>
      <div class="nav_dv3" id="nav_dv">
         <div id="nav_t">Three</div>
         <div class="nav_x2">洗衣机专区</div>
      </div>
      <div class="nav_dv4" id="nav_dv">
         <div id="nav_t">Four</div>
         <div class="nav_x2">厨电专区</div>
      </div>
      <div class="nav_dv5" id="nav_dv">
         <div id="nav_t">Five</div>
         <div class="nav_x2">商城专区</div>
      </div>
</div>
</body>
<script>
    $(function(){
        $(".right_nav>div").each(function(){
            $(this).hover(function(){
                $(".nav_x2",this).stop().animate({
                    left:-80,
                },600).css("z-index","200")
            },function(){
                $(".nav_x2",this).stop().animate({
                    left:80,
                },600).css("z-index","-2")
            })
        })
    })
    $(function(){
        $(".right_nav_top>div").each(function(){
            $(this).hover(function(){
                $(".nav_x3").stop().animate({
                    left:-80,
                },600).css("z-index","200")
            },function(){
                $(".nav_x3").stop().animate({
                    left:80,
                },600).css("z-index","-2")
            })
        })
    })
    $(function () {
        sub();
        $(window).scroll(sub);
        function sub(){
            if($(window).scrollTop()>0){
                $(".nav_x3").removeClass("hid");
            }else{
                $(".nav_x3").addClass("hid");
            }
        }
        $(".nav_x3").click(function(){
            $("html,body").animate({scrollTop:0},500)
        })
    });
    $(function () {
        var ind=0;
        $(".pic a:not(:first-child)").hide();
        function changepic() {
            $(".pic a").eq(ind).fadeIn(1000).siblings().fadeOut();
            $(".circlea").eq(ind).addClass("add").siblings().removeClass("add");
        }
        $(".circlea").mouseenter(function () {
            ind=$(this).index();
            changepic();
        });
        var set=setInterval(sub,3000);
        function sub() {
            if(ind<$(".circlea").length-1){
                ind++;
                changepic();
            }else {
                ind=0;
                changepic();
            }
        }
        $(".aaa").hover(function () {
            clearInterval(set);
        },function () {
            set=setInterval(sub,3000);
        })
    })
    $(function () {
        sub();
        $(window).scroll(sub);
        function sub(){
            if($(window).scrollTop()>0){
                $(".btn-top").removeClass("hid");
            }else{
                $(".btn-top").addClass("hid");
            }
        }
        $(".btn-top").click(function(){
            $("html,body").animate({scrollTop:0},500)
        })
    });
</script>
</html>